let section1 = document.getElementById("section");
let cp = document.getElementById("chanpin");
cp.onmouseover = function () {
    section1.style.display = "block";
}
section1.onmouseover = function () {
    section1.style.display = "block";
}
cp.onmouseleave = function () {
    section1.style.display = "none";
}
section1.onmouseleave = function () {
    section1.style.display = "none";
}
let prev = document.getElementById("prev");
let next = document.getElementById("next");
let headpicpic = document.getElementById("headpic");
let bigpicpic = document.getElementById("bigpic");
let flag = 1;
prev.onclick = function () {
    flag--;
    console.log(flag);
    clearbg()
    setTimeout(() => {
        changebg();
    }, 500);
}
next.onclick = function () {
    flag++;
    console.log(flag);
    clearbg()
    setTimeout(() => {
        changebg();
    }, 500);
    
}

function clearbg(){
    headpicpic.style.backgroundImage = "url(images/while.png)";
    bigpicpic.style.backgroundColor = "#fff";
}
function changebg() {
    if (flag == 0) {
        flag = 3;
    }
    if (flag > 3) {
        flag = 1;
    }
    switch (flag) {
        case 1:
            headpicpic.style.backgroundImage = "url(images/bigpic1.png)";
            bigpicpic.style.backgroundColor = "#01b548";
            break;
        case 2:
            headpicpic.style.backgroundImage = "url(images/bigpic2.png)";
            bigpicpic.style.backgroundColor = "#2ba8c6";
            break;
        case 3:
            headpicpic.style.backgroundImage = "url(images/bigpic3.png)";
            bigpicpic.style.backgroundColor = "#333333";
            break;
    }
}